<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>javascript在线测试器</title>
    <style>body {
        color: #000000;
        background-color: #ffffff;
        margin: 4px;
        margin-top: 0px;
    }

    body, html {
        border: 0px;
        margin: 0px;
        padding: 0px;
        height: 100%;
        position: relative;
        width: 100%;
    }

    .maintable td {
        padding-left: 5px;
        padding-right: 5px;
    }

    .code_input, .result_output {
        border: 1px solid #c3c3c3;
        width: 100%;
        height: 400px;
        background-color: #ffffff;
        color: #000000;
    }

    .toprect_txt a:link, .toprect_txt a:visited {
        text-decoration: none;
        color: #900B09;
        background-color: transparent
    }

    .toprect_txt a:hover, .toprect_txt a:active {
        text-decoration: underline;
        color: #FF0000;
        background-color: transparent
    }


    #footer {
        position: absolute;
        width: 893px;
        height: 20px;
        bottom: -20px;
        color: #617f10;
        font-family: verdana;
        font-size: 90%;
        padding-left: 10px;
        background-color: #e5eecc;
    }

    #content {
        background-color: #e5eecc;
        position: absolute;
        height: auto;
        top: 100px;
        bottom: 20px;
        width: 100%;
        border-top: solid #c3c3c3 1px;
        min-width: 903px;
        min-height: 400px;
    }

    #sourcecode {
        position: absolute;
        height: auto;
        left: 10px;
        top: 5px;
        bottom: 40px;
        width: 48%;
    }

    #textareaCode {
        position: absolute;
        height: 99%;
        width: 99%;
        top: 30px;
        bottom: 10px;
        border: 1px solid #d3d3d3;
        resize: none;
        min-width: 400px;
        min-height: 350px;
    }

    #result {
        position: absolute;
        height: auto;
        right: 10px;
        top: 5px;
        bottom: 40px;
        width: 48%;
    }

    #iframeResult {
        position: absolute;
        background-color: #ffffff;
        height: 99%;
        top: 30px;
        bottom: 10px;
        width: 100%;
        border: 1px solid #d3d3d3;
        min-width: 400px;
        min-height: 350px;
    }

    .headerText {
        color: #617f10;
        position: absolute;
        font-family: verdana;
        font-size: 90%;
        top: 8px;
    }

    #submitBTN {
        font-family: verdana;
        right: 5px;
        position: absolute;
        top: 0px;
        width: 130px;
    }
    </style>
    <script type="text/javascript">
        function submitTryit() {
            var t = document.getElementById("textareaCode").value;
            t = t.replace(/=/gi, "w3equalsign");
            var pos = t.search(/script/i)
            while (pos > 0) {
                t = t.substring(0, pos) + "w3" + t.substr(pos, 3) + "w3" + t.substr(pos + 3, 3) + "tag" + t.substr(pos + 6);
                pos = t.search(/script/i);
            }

            t = escape(t);
            document.getElementById("bt").value = "1";

            document.getElementById("code").value = t;
            document.getElementById("tryitform").action = "/try/demo_source/result.php?x=" + Math.random();
            validateForm();
            document.getElementById("tryitform").submit();
        }
        function validateForm() {
            var code = document.getElementById("code").value;
            if (code.length > 10000) {
                document.getElementById("code").value = "<h1>Error:提交数据超标啦！</h1>";
            }
        }
    </script>
<body style="background-color:#e5eecc;">

<div id="content">
    <div id="sourcecode">
        <div class="headerText">源代码:</div>
        <textarea class="code_input" id="textareaCode" name="textareaCode" wrap="logical" rows="10" cols="50">
        </textarea>

        <form style="margin:0px" action="/library/tryjs" method="post" target="view" id="tryitform"
              name="tryitform" onsubmit="validateForm();">
            <input id="submitBTN" type="submit" value="提交运行 &#187;">
            <input type="hidden" name="code" id="code">
            <input type="hidden" id="bt" name="bt">
        </form>
    </div>
    <div id="result">
        <div class="headerText">测试结果:</div>
        <div class="headerText" style="right:10px;">
        </div>
        <iframe id="iframeResult" class="result_output" frameborder="0" name="view" src="/library/tryjs"
                width="400"></iframe>
    </div>
    <div style="clear:both;"></div>
    <div id="footer">
        请在上面的文本框中编辑您的代码，然后单击提交按钮查看运行结果。
    </div>
</div>

</body>
</html>
